<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		
		
		<title>回课  详情</title>
		<!--
        	作者：offline
        	时间：2017-08-23
        	描述：回课的详情界面，有视屏播放和下面的乐谱，下面还有评论
        -->
		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="..js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		
		<style>
			.div-video{
				width: 100%;
				height: 280px;
				background-color: #000000;
				color: #FFFFFF;
			}
			.div1{
				padding: 5px;
				background-color: #FFFFFF;
			}
			.div6{
				margin-top: 2%;
				width: 100%;
				height: 50px;
				padding: 10px;
			}
			.div6 img{
				float: left;
				height: 35px;
			}
			.width{
				width: 100%;
			}
			.span1{
				color: #2cc7fd;
				font-size: larger;
			}
			.span2{
				color: #a3a3a3;
				font-size: small;			
			}
			.span3{
				float: left;
				line-height: 35px;
			}
			.magin-120{
				margin-top: 120%;
			}
			.width-30{
				width: 30px;
			}
			.span3{
				font-size: x-larger;
			}
			.margin-5px{
				margin-top: 5px;
			}
			.button1{
				background-color: #00d5c5;
				float: right;
				color: #FFFFFF;
				width: 80px;
			}
			body{
				background-color: #F6F6F6;
			}
			
		</style>
	</head>
	<body>
		
			
		<div class="div-video">
			视频播放
			
		</div>
		<div class="flex h-center div1 v-center" >
			<div class="flex-1">
				<img class="width" src="../img/head-01.png" />

			</div>
			<div class="flex-3">
				<div style="padding-left: 15px;">
					<span class="span1">王大珂</span>
					<span class="span2">3小时前</span>
				</div>
				<div class="margin-5px" style="padding-left: 15px;">
					<span class="span3">贝多芬的悲伤</span>
				</div>

			</div>
			<div class="flex-2">

				<div class="flex" >
					<div class="flex-1">
						<img class="width-30" src="../img/icon-messages.png" />
					</div>
					<div class="flex-1">
						<img class="width-30" src="../img/icon-collect.png" />
					</div>
					<div class="flex-1">
						<img class="width-30" src="../img/icon-share.png" />
					</div>
				</div>
			</div>

		</div>
		
		<div class="div6">
			    <img  src="../img/icon-vertical.png"/>
				<span class="span3">乐谱标注</span>
				<button type="button" class="mui-btn mui-btn-outlined button1">打赏</button>
		</div>
		
		<div style="margin: 10px;background-color: #FFFFFF;">
			<img style="width: 100%;" src="../img/musicscore-01.png" />
			<div style="text-align: center;">
				
				<img style="width: 50px;" src="../img/label-character.png"/>
			
				<img style="width: 50px;" src="../img/label-region.png"/>
				
			</div>
			
		</div>
		<div style="margin: 10px;">
			<div class="flex v-center width" style="height: 30px;">
					<img class="width-30" src="../img/icon-star.png" />
					<span >钢琴家</span>
					<span class="yellow">  + 5</span>
						
				</div>
				<div class="flex v-center width" style="height: 30px;">
					
					<span class="blue">钢琴家 :</span>
					<span class="gray">还不错,继续努力哦!</span>
						
				</div>
		</div>
		
		
		
		<!--pdf乐谱放大后的界面-->
		<div id="idddd" class="fill-all dialog" style="visibility: visible;position: fixed;">
			
			
		</div>
		
		<script>
			document.getElementById("idddd").addEventListener('touchmove', function (event) {
               event.preventDefault();
},          false);
			
		</script>
		
		
	</body>
</html>
